<template>
    <div style="min-height: 60vh">
        <h-section title="版本交付排期计划" collapse style="height: 100%">
            <div v-if="!disabled">
                <a-button block type="dashed" class="create-btn" @click="handleCreateSubVersion" v-if="!lubiaoDetail.verMgtId">
                    <PlusOutlined />
                    <span>创建支线版本</span>
                </a-button>
                <a-button block type="dashed" class="create-btn" @click="handleSelectSubVersion" v-if="!lubiaoDetail.verMgtId">
                    <PlusOutlined />
                    <span>选择支线版本</span>
                </a-button>
                <a-button block type="dashed" class="create-btn" @click="handleCreateVersion" v-if="lubiaoDetail.verMgtId">
                    <PlusOutlined />
                    <span>关联预发布版本</span>
                </a-button>
            </div>
            <!-- 必须有支线版本才显示 -->
            <VersionList
                :lubiaoDetail="lubiaoDetail"
                :disabled="disabled"
                :subVersionInfo="subVersionInfo"
                v-if="lubiaoDetail.verMgtId"
                @success="handleSuccess"
            />
            <a-empty v-if="!lubiaoDetail.verMgtId" />
        </h-section>
        <SelectSubVersionModal ref="SelectSubVersionModalRef" :lubiaoDetail="lubiaoDetail" @success="handleSuccess" />
        <CreateSubVersionModal ref="CreateSubVersionModalRef" :lubiaoDetail="lubiaoDetail" @success="handleSuccess" />

        <RelateVersionModal ref="RelateVersionModalRef" :lubiaoDetail="lubiaoDetail" :subVersionInfo="subVersionInfo" @success="handleSuccess" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue/es';
import VersionList from './VersionList/index.vue';
import SelectSubVersionModal from '../RightSide/VersionModal/SelectSubVersionModal.vue';
import CreateSubVersionModal from '../RightSide/VersionModal/CreateSubVersionModal.vue';
import RelateVersionModal from './VersionModal/RelateVersionModal.vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, watch, toRefs } from 'vue';
export default defineComponent({
    components: {
        SelectSubVersionModal,
        CreateSubVersionModal,
        RelateVersionModal,
        PlusOutlined,
        VersionList
    },
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const SelectSubVersionModalRef = ref<any>();
        const CreateSubVersionModalRef = ref<any>();
        const RelateVersionModalRef = ref<any>();
        const state = reactive<any>({
            subVersionInfo: {},
            signPostShowType: 0
        });
        // 选择支线版本
        const handleSelectSubVersion = () => {
            if (props.lubiaoDetail.pmpRegisteredProjectDTO) {
                if (
                    props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO &&
                    props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO.versionNumber
                ) {
                    unref(SelectSubVersionModalRef).open();
                } else {
                    message.error('请先至注册制项目一览中关联主线版本！');
                }
            } else {
                message.error('请先至注册制项目一览中关联主线版本！');
            }
        };
        // 新增支线版本
        const handleCreateSubVersion = () => {
            if (props.lubiaoDetail.pmpRegisteredProjectDTO) {
                if (
                    props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO &&
                    props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO.versionNumber
                ) {
                    unref(CreateSubVersionModalRef).open();
                } else {
                    message.error('请先至注册制项目一览中关联主线版本！');
                }
            } else {
                message.error('请先至注册制项目一览中关联主线版本！');
            }
        };
        // 关联预发布版本
        const handleCreateVersion = () => {
            unref(RelateVersionModalRef).open();
        };
        // 回调
        const handleSuccess = () => {
            emit('success');
        };
        // 获取支线版本数据
        const getSubVersionInfo = async () => {
            const query = {
                id: props.lubiaoDetail.verMgtId
            };
            const { success, moule, errorMsg } = await api.versionControlModel.findSignpostVersionBySubId(query);
            if (success) {
                state.subVersionInfo = {
                    ...moule
                };
            } else {
                message.error(errorMsg);
            }
        };
        // 监听路标详情
        watch(
            () => props.lubiaoDetail,
            (n) => {
                if (n.verMgtId) {
                    getSubVersionInfo();
                } else {
                    state.subVersionInfo = {};
                }
            },
            {
                deep: true,
                immediate: true
            }
        );

        return {
            ...toRefs(state),
            SelectSubVersionModalRef,
            CreateSubVersionModalRef,
            RelateVersionModalRef,
            handleSelectSubVersion,
            handleCreateSubVersion,
            handleCreateVersion,
            handleSuccess
        };
    }
});
</script>

<style scoped lang="less">
.create-btn {
    color: #107ed5;
    width: 100%;
    margin: 0 0 8px 0;
    background: rgba(16, 126, 213, 0.08);
    border-color: rgba(16, 126, 213, 0.08);
}
</style>